import React, { useEffect, useState } from 'react'
import { getAskDetail, getAskListDetail, deleteSave, addSave, addComment } from "../../../../api/ask"
import {message} from "antd"
import { MessageFilled } from "@ant-design/icons"
import Right from "../../../../components/Record/Right"
import "./index.scss"
export default function AskDetail(props) {
    const [myMessage, setMyMessage] = useState({})
    // 我的个人信息
    const [myComment, setMyComment] = useState([])
    // 评论的列表
    const [flag, setFlag] = useState(false)
    // 评论的开关
    const [comment,setComment] = useState("")
    const getDetail = async () => {
        let res = await getAskDetail(props.match.params.id)
        setMyMessage(res.data.data)
        let result = await getAskListDetail({ answerId: props.match.params.id })
        setMyComment(result.data.rows);
    }
    // 获取初始化的数据
    useEffect(() => {
        getDetail()
    }, [props])
    // 获取初始化数据
    const deleteSaveList = async () => {
        let res = await deleteSave({ answerId: props.match.params.id })
        console.log(res);
        let result = await getAskDetail(props.match.params.id)
        setMyMessage(result.data.data)
    }
    // 取消收藏
    const addSaveList = async () => {
        let res = await addSave({ answerId: props.match.params.id })
        console.log(res);
        let result = await getAskDetail(props.match.params.id)
        setMyMessage(result.data.data)
    }
    // 添加收藏
    const publish = async() => {
        let res = await addComment({
            answerId: props.match.params.id,
            questionValue:comment
        })
        if(res.data.code===200){
            message.success("发布成功")
            setFlag(!flag)
        }else{
            message.warn("发布失败")
        }
        let result = await getAskListDetail({ answerId: props.match.params.id })
        setMyComment(result.data.rows);
    }
    // 发布评论
    return (
        <div className="bigDetail">
            <div className="answerDetail">
            <div className="answerTop">
                <div className="answerTop_Left">
                    <p><b>问题</b><>{myMessage.questionTitle}</></p>
                    <div>
                        <img alt="" src={myMessage.userPictureUrl} />
                        <p>{myMessage.userName}</p>
                        <p>{myMessage.pushTime}</p>
                    </div>
                    <p>{myMessage.questionContent}</p>
                    <p>
                        {
                            myMessage.labels && myMessage.labels.map((item, index) => {
                                return <span key={index}>{item}</span>
                            })
                        }
                    </p>
                    <p><button onClick={() => {
                        setFlag(!flag)
                    }}>回答</button><button
                        className={myMessage.collection ? "acitve" : ""}
                        onClick={() => {
                            myMessage.collection ? deleteSaveList() : addSaveList()
                        }}
                    >{myMessage.collection ? "取消收藏" : "收藏"}</button></p>
                </div>
                <div className="answerTop_Right">
                    <MessageFilled />{myMessage.answerCount}
                </div>
            </div>
            {
                flag ?
                    <div className="askComment">
                        <div>
                            <img alt="" src={myMessage.userPictureUrl} />
                            <p>{myMessage.userName}</p>
                            <p>{myMessage.pushTime}</p>
                        </div>
                        <textarea value={comment} onChange={(e)=>{
                           setComment(e.target.value)
                        }}/>
                        <button onClick={()=>{
                            publish()
                        }}>发布</button>
                    </div> :
                    null
            }
            <div className="answerBottom">
                <p>全部回答({myComment.length})</p>
                <div>
                    {
                        myComment && myComment.map(item => {
                            return (
                                <div key={item.replyId} className="askDetailItem">
                                    <p>
                                        <img src={item.userPictureUrl} alt="" />
                                        <span>{item.userName}</span>
                                        <span>{item.replyDate}</span>
                                    </p>
                                    <p>{item.replyContext}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
            <Right />
        </div>
        
    )
}
